@import "~common/css/_variables.scss";

// 独家放送
.privatecontent {
  ul {
    display: flex;
    li {
      width: calc(33.333333333% - 20px);
      overflow: hidden;
      margin-bottom: 20px;
      &:not(:last-child) {
        margin-right: 30px;
      }
      .img_box {
        position: relative;
        width: 100%;
        padding: 56% 0 0 0;
        border-radius: 6px;
      }
    }
  }
}

// 最新音乐
.new_music {
  margin-bottom: 20px;
  ul {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    border: 1px solid #e5e6ea;
    li {
      display: flex;
      align-items: center;
      width: 50%;
      height: 60px;

      font-size: $fz13;
      cursor: default;
      &:nth-child(4n + 4),
      &:nth-child(4n + 3) {
        background-color: rgba($color: #000000, $alpha: 0.02);
      }
      &:nth-child(even) {
        border-left: 1px solid #e5e6ea;
      }
      &:hover {
        background-color: rgba($color: #000000, $alpha: 0.05);
      }
      .su {
        width: 40px;
        text-align: center;
      }
      .minfo {
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
        width: calc(100% - 40px);
        height: 100%;
        padding-left: 50px;
        &::before {
          position: absolute;
          top: 10px;
          left: -1px;
          content: "";
          width: 42px;
          height: 42px;
          border-radius: 1px;
          border: 1px solid #e5e6ea;
        }
        .singer {
          color: rgba($color: #000000, $alpha: 0.25);
          font-size: $fz12;
          margin-top: 4px;
        }
      }
    }
  }
}

// 推荐nv
.personalized_mv {
  margin-bottom: 20px;
  ul {
    display: flex;
    li {
      width: calc(25% - 23px);
      overflow: hidden;
      &:not(:last-child) {
        margin-right: 30px;
      }
      .img_box {
        position: relative;
        width: 100%;
        padding: 56% 0 0 0;
        border-radius: 6px;
        .count {
          position: absolute;
          top: 0;
          right: 0;
          font-size: $fz12;
          color: #fff;
          border-radius: 2px 0 0 2px;
          padding: 2px 5px 2px 60px;
          background: url("~common/images/local_layer.png") center center / 100%
            no-repeat;
          &::before {
            position: absolute;
            top: 0;
            left: 30px;
            content: "";
            width: 20px;
            height: 16px;
            background: url("~common/images/video.png") center center / 14px no-repeat;
          }
        }
      }
    }
  }
}
